/*
 * 倒记时按钮
 */
<script>
  export default {
        name: "ys-countdown-btn",
        props: {
           //发验证码的手机号
           mobile :  {
               type: String,
               default: ""
           },
           //倒计时秒数
           secord : {
               type: Number,
               default: 30
           }
        },
        mounted() {
          
        },
        data() {
          return {
              is_disabled: false,
              btnText: "获取验证码"
          };
        },
        methods: 
        {
            /*
            * 发送验证码
            */
            sendCode: function() 
            {
                console.log("发送验证码");
                /*
                * 检查手机号 
                */
                if (!(this.mobile.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(this.mobile))) {
                  uni.showToast({
                    title:'手机格式不正确',
                    icon:'none'
                  })                  
                  return false;
                }
                /*
                * 倒计时
                */              
                if (!this.is_disabled) {
                    //设置不可用
                    this.is_disabled = true;
                    let sec = this.secord;
                    this.timer = setInterval(() => {
                      this.btnText = sec-- + "s";
                      if (this.btnText == "0s") {
                          clearInterval(this.timer);
                          this.timer = null;     
                          sec = this.secord;
                          this.is_disabled = false;
                          this.btnText = "获取验证码";
                      }
                    }, 1000);
                }   
                /*
                 * 发短信
                 */
                var query = `
                    mutation sendCode ($mobile: String){
                      sendCode(mobile: $mobile){
                        error_code
                        error_msg
                      }
                    }
                `;                
                this.graphql.query({query:query, variables: {"mobile" : this.mobile}}).then(function (res) {
                    console.log(JSON.stringify(res));
                    if (res.sendCode.error_code == 0) {
                        uni.showToast({
                            title:'验证码已经发送',
                            icon:'success'
                        })
                    } else {
                        uni.showToast({
                            title:res.sendCode.error_msg,
                            icon:'none'
                        })                        
                    }
                    //do something
                }).catch((error) => {
                    console.log(error);
                });                  
            }
        }
  }     
</script>

<template name="ys-countdown-btn">
    <button class="ys-countdown-btn" :disabled="is_disabled" @tap="sendCode">{{btnText}}</button>
</template>

<style lang="scss">
    .ys-countdown-btn {
        background: $btn_color;
        color: $btn_font_color;
        border-radius: $btn_border_radius;
        border: none;
        font-size: 24upx;
        width: 264upx;
        height:60upx;
        line-height: 60upx;
        padding: 0upx 28upx;
    }
</style>